<template>
  <div class="nav-header">
      <!-- 导航标签区 -->
      <el-menu 
        mode="horizontal" 
        :default-active="activeTab"
        class="nav-tabs"
      >
        <el-menu-item 
          v-for="item in findAllTypeList" 
          @click="handleDynamicClick(item)"
          :index="String(item.tid)"  
          :key="item.tid"
        >
          {{ item.tname }}
        </el-menu-item>
      </el-menu>
  
      <!-- 右侧功能区 -->
      <div class="right-area">
        <el-input
          v-model="searchKey"
          placeholder="全站搜索"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
  
        <el-button-group v-if="nickName == '' || nickName == undefined" class="ml-3">
          <el-button type="primary" @click="openLogin">登录</el-button>
          <el-button type="primary" plain @click="openRegister">注册</el-button>
        </el-button-group>
        <el-dropdown v-else>
          <el-button type="primary">
            您好:{{ nickName }}<el-icon class="el-icon--right"></el-icon>
          </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handlerNews">发布新闻</el-dropdown-item>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>浏览记录</el-dropdown-item>
                <el-dropdown-item @click="Logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </template>

<script setup>
import { ref, onMounted, watch, onUpdated } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getFindAllTypes } from '@/api/index'
import { emitter } from '@/untils/evenBus'
import { useUserInfoStore } from '@/stores/userInfo'
import { useRouter } from 'vue-router'

const userInfoStore = useUserInfoStore()
const nickName = ref('')
const router = useRouter()

//接收主页给我的nickName
emitter.on("header-name", (message) => {
  nickName.value = message.headerName
})


//导航菜单点击事件函数
const handleDynamicClick = (menuItem) => {
  //我在Header.vue发布一个消息
  emitter.emit("news-type",{
    newsType: menuItem.tid
  })
}

// 计算当前激活标签
const activeTab = "0"

//启动加载新闻类别
onMounted(()=>{
  getList()

  console.log("onMounted... nickName222=" + userInfoStore.nickName)
  nickName.value = userInfoStore.nickName
})


//页面挂载
 onUpdated(()=>{
  console.log("onUpdated .......")
  nickName.value = userInfoStore.nickName
})

const findAllTypeList = ref([])
//查询新闻分类
const getList = async () => {
  let ret = await getFindAllTypes()
  ret.unshift({
    tid: 0,
    tname: '全新闻'
  })
  findAllTypeList.value = ret
}



//搜索框绑定的变量
const searchKey = ref('')
//监听这个值
watch(
  searchKey,
  (newVal) => {
  emitter.emit("search-key", {
    searchKey: newVal
  })
})

const openRegister = () => {
  router.push({name: 'Register'})
}


const openLogin = () => {
  router.push({name: 'Login'})
}
const Logout = () => {
  //removeToken(),
  userInfoStore.initUserInfo()
  nickName.value=''
  router.go({name:'HeadlineNews'})
}

const handlerNews= ()=>{
    router.push({name:'AddOrModifyNews'})
}
</script>

<style lang='less' scoped>
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  .nav-tabs {
    border-bottom: none;
    flex-grow: 1;
  }

  .nav-tabs :deep(.el-menu-item) {
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    transition: color 0.3s;
  }

  .right-area {
    display: flex;
    align-items: center;
    gap: 20px;

    .search-input {
      width: 240px;
      transition: width 0.3s;
    }

    .search-input:focus-within {
      width: 300px;
    }
  }
}

@media (max-width: 992px) {
  .nav-tabs {
    display: none;
  }
  
  .right-area {
    width: 100%;
    justify-content: space-between;
  }
  
  .search-input {
    flex: 1;
    max-width: 400px;
  }
}
</style>